<%@ page contentType="text/html;charset=UTF-8" %>

<script type="text/javascript">
	$(function(){
		var header =$('.navbar-inner');
		var leftHeader = header.offset().left;
		var setting = $('.form-inline');
		var leftSetting = setting.offset().left;
		var footer = $('#footer');

		var headerTable = $('.board thead');
<%--		set_fixed_header_width(headerTable);		--%>
		var top = headerTable.offset().top - parseFloat(headerTable.css('margin-top').replace(/auto/, 0));
		$(window).on('scroll', function (){
			var x = 0 - $(this).scrollLeft();
		    var y = $(this).scrollTop();
		    header.offset({
				left: $(this).scrollLeft()
		    })
		    setting.offset({
				left: $(this).scrollLeft()+30
		    })
		    footer.offset({
				left: $(this).scrollLeft()
		    })
		})				    
	})				
</script>
<table class="board" border="0" cellspacing="0">
	<thead>			
		<tr>
			<th id="${start.id}" class="status" style="background-color: ${start.color}; " >
			<span>${start.name}</span>
			</th>
		<g:each in="${statusList}">
			<th id="${it.id}" class="status" style="background-color: ${it.color}; " >
			<span>${it.name}</span>
			</th>
		</g:each>
			<th id="${done.id}" class="status" style="background-color: ${done.color}; " >
			<span>${done.name}</span>
			</th>
		</tr>
		<tr>
			<th id="${start.id}" class="expand" >
			<i class="icon-fixed-width"></i>
			</th>
		<g:each in="${statusList}">
			<th id="${it.id}" class="expand" >
			<i class="icon-fixed-width"></i>
			</th>
		</g:each>
			<th id="${done.id}" class="expand">
			<i class="icon-fixed-width"></i>
			</th>
		</tr>				
	</thead>
	<tbody>
		<tr>
				<td class="task-group" statusid="${start.id}"></td>
			<g:each in="${statusList}">
				<td class="task-group" statusid="${it.id}"></td>
			</g:each>
				<td class="task-group" statusid="${done.id}"></td>
		</tr>
	</tbody>
</table>

<%-- MODAL SETTING KANBAN --%>
<form action="" method="POST" id="form-board-setting">
	<input id="teamid" type="hidden" value="${teamid}">
	<div id="formSetting" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	    <h3 id="myModalLabel">Setting Kanban</h3>
	  </div>    
	  <div class="modal-body" align="center">
	  <input type="button" class="btn add-status btn-info" value="Add more field">
	  	<dl class="modal-kanban-setting">
		  	<dt name="hidden${start.id}" ></dt>
	  		<dd>
	  			<input class="input-small" type="text" name="statusname" id="${start.id}" value="${start.name}" required>
	  			<div class="input-append color" data-color="${start.color}" data-color-format="hex">
					  <input class="input-small" name="color" type="text" value="${start.color}">
					  <span class="add-on"><i style="background-color: ${start.color}"></i></span>
				</div>
	  			<span style="margin-left:5px; " class="" id="${start.id}"><i class="icon-ban-circle"></i></span>
	  				  					
	  		</dd>
	  	<g:each in="${statusList}">
	  		<dt name="hidden${it.id}" ></dt>
	  		<dd>	  			
	  			<input class="input-small" type="text" name="statusname" id="${it.id}" value="${it.name}" required>
	  			<div class="input-append color " data-color="${it.color}" data-color-format="hex">
					  <input class="input-small" name="color" type="text" value="${it.color}">
					  <span class="add-on"><i style="background-color: ${it.color}"></i></span>
				</div>
	  			<span style="margin-left:5px; " class="remove-status" id="${it.id}"><i class="icon-minus"></i></span>		
	  		</dd>
	  	</g:each>
	  		<dt name="hidden${done.id}" ></dt>
	  		<dd>
	  			<input class="input-small" type="text" name="statusname" id="${done.id}" value="${done.name}" required>
	  			<div class="input-append color" data-color="${done.color}" data-color-format="hex">
					  <input class="input-small" name="color" type="text" value="${done.color}">
					  <span class="add-on"><i style="background-color: ${done.color}"></i></span>
				</div>
	  			<span style="margin-left:5px; " class="" id="${done.id}"><i class="icon-ban-circle"></i></span>	  					
	  		</dd>
		</dl>
	  </div>
	  <div class="modal-footer">
	  	<input type="submit" value="Save" class="btn btn-info" aria-hidden="true">
	  	<button class="btn btn-info reset">Reset</button>
	    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>    
	  </div>  
	</div>
</form>

<%-- MODAL ADD NEW ISSUE --%>
<div id="formIssue" class="modal hide fade modal-create-issue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<form action="" method="POST" id="add-issue-form">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Create Task</h3>
  </div>
  <div class="modal-body" align="center">  
	<table cellspacing="0">	
		<tr>
			<td>Project:</td>
			<td>
				<select class="combo-box" id="proselect" onchange="getUserStory();"></select>
			</td>
		</tr>   
		<tr>
			<td>User Story:</td>
			<td><select class="combo-box" id="uSselect" name="userStory"></select><span id="s3" style="display: none; color: red;">User Story not null</span></td>
			<td style="margin-left: 20px"></td>
			<td>Status:</td>
			<td><select id="status" name="status"></select> </td>
		</tr>
		<tr>
			<td>Sprint:</td>
			<td><input type="text" id="sprint" name="sprint"></td>
			<td></td>
			<td>Priority:</td>
			<td><g:select id="priority" name="priority" from="${['Must','Should','Could','Wont']}"  /></td>
		</tr>
		<tr>
			<td>Type:</td>
			<td> <g:select id="type" name="type" from="${["User Story","Task","Bug"]}"/></td>
			<td></td>
			<td>Asigned to:</td>
			<td><select id="assigned" name="assigned"></select> </td>
		</tr>
		<tr>
			<td>Subject:</td>
			<td><input type="text" id="subject" name="subject" required="required"></td>
			<td></td>
			<td>Remain:</td>
			<td><input type="text" name="remain" value="D0T0" id="remain"><span id="s1" style="display: none; color: red;">Must be seem D..T..</span></td>
		</tr>
		<tr>
			<td>Description:</td>
			<td> <g:textArea id="description" name="description" rows="5" cols="60" required="required"/></td>
			<td></td>
			<td>Estimate:</td>
			<td><input type="text" name="estimate" value="D0T0" id="estimate"><span id="s2" style="display: none;color: red;">Must be seem D..T..</span></td>
		</tr>
	</table>	
	</div>
	<div class="modal-footer">
	  	<input type="submit" class="btn btn-info" value="Create" aria-hidden="true">
	  	<button class="btn btn-info reset">Reset</button>
	    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>    
	  </div> 
	  </form>
</div>
<div id="context-menu">
    	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    	<li class="dropdown-submenu edit">
           <a tabindex="-1" href="#">Edit</a>
           <ul class="dropdown-menu">           	
           		<li><a tabindex="-1" href="#" class="edit-issue">Edit</a></li>           		
           		<li><a tabindex="-1" href="#" class="delete-issue">Delete</a></li>             
           </ul>
         </li>
         <li role="presentation" class="divider"></li>
         <li class="dropdown-submenu moveto">
           <a tabindex="-1" href="#">Move to</a>
           <ul class="dropdown-menu">
           		<li><a tabindex="-1" href="#" statusid="${start.id}">${start.name}</a></li>
           <g:each in="${statusList}">
           		<li><a tabindex="-1" href="#" statusid="${it.id}">${it.name}</a></li>
		   </g:each>
           		<li><a tabindex="-1" href="#" statusid="${done.id}">${done.name}</a></li>             
           </ul>
         </li>
       </ul>
</div>
<script>
$(function(){	
	//Reset setting form
	$.fn.resetSettingForm = function(){
		$(this)[0].reset();
		$(this).find('dd,dt').each(function(){
			if($(this).is('[name=""]') || $(this).find('span').is('[id=""]'))
				$(this).fadeOut(300, function(){
					$(this).remove();
				});
			else{
				$(this).fadeIn(300);
				$(this).find('input').removeAttr('status');
			}			
			$(this).find('.color .add-on i').css({'background-color': ''+$(this).find('.color .add-on i').parent().prev('input').val()+''});
		});
	}	
	
	$('#form-board-setting .reset').click(function(){
		$('#form-board-setting').resetSettingForm();
		return false;
	});
	$('#formSetting').on('hidden',function(){
		$('#form-board-setting').resetSettingForm();
	});
	
	//Handle submit setting form
	$('#form-board-setting').submit(function(e){
		var obj = [];
		obj.push({teamid: $('#teamid').val(), sprintid : $('#sprint').val()});
		$(this).find('input[type="text"]:not([name="color"])').each(function(){
			var id = $(this).attr('id');
			if($(this).attr('haschild')){
				var prevstatus = $('.task-group[statusid="'+id+'"]').prev('.task-group').attr('statusid');
				var tasklist = [];
				$('.task-group[statusid="'+id+'"]').find('.sticker').each(function(){
					tasklist.push($(this).attr('id'));
				});
				obj.push({id: id, name: $(this).val(), status: $(this).attr('status'), 
							color: $(this).next('.color').find('input').val(), tasklist: tasklist, prevstatus: prevstatus});
			}
			else{
				obj.push({id: $(this).attr('id'), name: $(this).val(), status: $(this).attr('status'), color: $(this).next('.color').find('input').val()});
			}			
		});		
		$.ajax({
		        type: "POST",		        
		        url: UPDATE_STATUS,
		        contentType : "text/plain",
		        cache: false,
		        dataType: 'json',
		        data: JSON.stringify(obj)	        
		});			
	});	

	//Add new issue
	$('#formIssue').on('show', function () {
		setForm();
	});
	$('#formIssue').on('hidden',function(){
		$('#add-issue-form').resetSettingForm();
	});
	$('#add-issue-form .reset').click(function(){
		$('#add-issue-form').resetSettingForm();
		return false;
	});
	
	//Handle submit add issue form
	$('#add-issue-form').submit(function(){
		checkOnAddIssueForm();
		var obj = [];
		obj.push({userStory:$('#uSselect').val(), sprint: $('input#sprint').attr('sprintid'), type: $('#type').val(),
				subject: $('#subject').val(), description: $('#description').val(), status: $('#status').val(),
				assigned: $('#assigned').val(), remain: $('#remain').val(), estimate: $('#estimate').val(),
				priority: $('#priority').val()
			});
		$.ajax({
	        type: "POST",		        
	        url: "${g.createLink(controller: 'Issue', action: 'jsonAddNewIssue')}",
	        contentType : "text/plain",
	        dataType: 'json',
	        cache: false,
	        data: JSON.stringify(obj),
	        success: function(data){
			        	$('#formIssue').modal('hide'); 
			    		addNewIssue(data.newIssue);
		     		}		        
		});	
		$(this)[0].reset();	
		return false;
	});
	
// Remove column
	$('.modal-kanban-setting').on('click','.remove-status',function(){
		var id=$(this).attr('id');
		var dd = $(this).parent();
		var childOfColumn = $('.task-group[statusid="'+id+'"]').find('.sticker').length;
		
		if(id==""){		
			dd.fadeOut(300,function(){	$(this).remove() });
			dd.prev('dt').fadeOut(300,function(){ $(this).remove() });
		}else if(childOfColumn){
			if(confirm('There are some task in this column which will return to prevous column. Do you want remove it ?')){
				dd.fadeOut(300);
				dd.prev('dt').fadeOut(300);
				$(this).parent().find('input[name="statusname"]').attr('status','remove').attr('haschild','true');				
			}else{
				return true;
			}
		}else{
			dd.fadeOut(300);
			dd.prev('dt').fadeOut(300);
			$(this).parent().find('input[name="statusname"]').attr('status','remove');
		}
		
	});

// Add more column
	$('.add-status').on('click',function(){
		var dd = $('<dd><input class="input-small" type="text" name="statusname" status="new" value="" required></dd>');
		var span = $('<span style="margin-left:5px; " class="remove-status" id="">'+
					 '<i class="icon-minus"></i></span>');		
		var color = $('<div class="input-append color" data-color="#368EE0" data-color-format="hex">'+
						  '<input class="input-small" name="color" type="text" value="#368EE0">'+
						  '<span class="add-on"><i style="background-color: #368EE0"></i></span>'+
					'</div>');
		var dt = $('<dt name=""></dt>');			
		$('.modal-kanban-setting dt')
			.last()
			.before(dd.append(span.before(color))
			.before(dt));
		$('.color').colorpicker();
	});

//Expand and collapse column
	$('.expand').on('click','i',function(){
		var i = $(this);
		var th = $(this).parent();
		var thead = th.closest('table').find('.status').eq(th[0].cellIndex);
		var title = thead.text();	
		var td = th.closest('table').find('td').eq(th[0].cellIndex);
		if(!i.attr('expand') || i.attr('expand')=='false'){
			$(this).text('');
			i.attr('expand','true');
			thead.addClass('column-collapsed');
			td.addClass('column-collapsed');	
			td.removeClass('task-group');
<%--			set_fixed_header_width($('.board thead'));		--%>
		}
		else if(i.attr('expand')=='true'){
			$(this).text('');
			i.attr('expand','false');
			thead.removeClass('column-collapsed');
			td.removeClass('column-collapsed');
			td.addClass('task-group');
<%--			set_fixed_header_width($('.board thead'));--%>
		}
	});

//Remove issue
	$('.task-group').on('click','.sticker .icon-remove',function(){
		var sticker = $(this).parents('.sticker');
		var issueID = sticker.attr('id');
		if(confirm('Are you sure want to remove this issue?')){
			sticker.slideUp(150,function(){this.remove()});
			$.post('${g.createLink(controller: 'Issue', action: 'deleteIssue')}',{id : issueID});			
		}
	});

	//Handle click event - show all description of issue
	$('.task-group').on('click','.sticker .sticker-inner',function(){
		if(!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off'){
			var height = $(this).find('div').css({'white-space':'normal'}).height();
			$(this).find('div').css({'white-space':'nowrap'});
			if(height>20){
				$(this).transition({ height: height+'px' }, function(){
					$(this).find('div').css({'white-space':'normal'});
				});
				$(this).attr('data-toggled','on');
			}							
		}else if ($(this).attr('data-toggled') == 'on'){			
			$(this).transition({ height: '20px' }, function(){
				$(this).find('div').css({'white-space':'nowrap'});
			});
			$(this).find('div').css({'white-space':'nowrap'});
		    $(this).attr('data-toggled','off');
		}
	})
	
	//Handle click event - show all comment of issue		
	$('.task-group').on('click','.sticker-footer .icon-comments',function(){
		var comment_wrapper = $(this).parents('div.sticker-footer').next('div.comment-wrapper');
		if(!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off'){
			comment_wrapper.show(200);
			$(this).attr('data-toggled','on');			
		}else if ($(this).attr('data-toggled') == 'on'){
			comment_wrapper.hide(200);
			$(this).attr('data-toggled','off');
		}
	})

//Handle event context menu on sticker
	$('.task-group').on('contextmenu.context.data-api','div.sticker',function(e){
		e.preventDefault();
		$('#assign-menu').find('.dropdown-menu').first().stop(true, true).slideUp(200);
		var issueID = $(this).attr('id');
		var sticker = $(this);
		var columnStatus = $(this).parent().attr('statusid');
		$('#context-menu a').off('click');
		$('#context-menu .moveto ul li a').click(function(){
			var statusID = $(this).attr('statusid');
			if(columnStatus!=statusID){
				$.post('${g.createLink(controller: 'Dashboard', action: 'updateStatusIssue')}',{issueid : issueID, statusid : statusID});				
	
				var clone = sticker.clone().hide();
				sticker.slideUp(200,function(){$(this).remove()});

				var tdPrepend = $('#kanban table td[statusid="'+statusID+'"]');
				tdPrepend.prepend(clone);
				if(!tdPrepend.hasClass('column-collapsed')){
					clone.slideDown(200);
				}else{
					clone.css({'display':''});
				}
			}
			$('#context-menu').removeClass('open');			
			return false;
		});

		$('#context-menu .edit a.edit-issue').click(function(){
			
		});
		$('#context-menu .edit a.delete-issue').click(function(){
			if(confirm('Are you sure want to remove this issue?')){
				sticker.slideUp(150,function(){
					$.post('${g.createLink(controller: 'Issue', action: 'deleteIssue')}',{id : issueID});
					this.remove()
				});
							
			}
		});
				
	});

//Colorpicker
	$('.color').colorpicker();

//Resize kanban
<%--	resizeKanban();--%>

//Load issue
	findIssueBySprint($('#sprint').val());

//Setup drappable	
	setupDraggable();
})
</script>
